<template>
	<view class="navigation_box">
		<view class="card_tetle">
			<text class="tip_title">地址导航</text>
			<view class="tip_icon" @click="handleJump">
				<image src="/pagesA/static/details/adders3.png" mode="" class="more_icon" style="width: 24rpx;height: 26rpx;"></image>
				<text class="change_color">到这里去</text>

			</view>
		</view>
		<view class="map">
			<map style="width: 100%; height: 300rpx;" :latitude="mapData.latitude" :longitude="mapData.longitude"
				:markers="mapData.covers">
			</map>


		</view>
		<!-- <view class="nav_tap_box">
			<view class="nav_tap" @click="showLineIndex = 1">
				<text>轨道交通</text>
				<view class="tip_line" :class="{select_tip:showLineIndex ==2}">

				</view>
			</view>
			<view class="nav_tap" @click="showLineIndex = 2">
				<text>公交路线</text>
				<view class="tip_line " :class="{select_tip:showLineIndex ==1}">

				</view>
			</view>

		</view> -->
		<!-- <view class="address_list" v-for="(item,index) in list4" :key="index">
			<view class="address_list_title">
				{{item.title}}
			</view>
			<text class="address_list_des">{{item.des}}</text>
		</view> -->
		<!-- <view class="address_list">
			<text class="address_list_nodata">未找到路线</text>
		</view> -->
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import config from '@/uitls/config'
	const props = defineProps({
		name: {
			typeof: String,
			default: ''
		},
		mapData: {
			typeof: Object,
			default: () => {
				return {
					id: 900000000, // 使用 marker点击事件 需要填写id
					latitude: 39,
					longitude: 116,
					covers: [{
						latitude: 39,
						longitude: 116,
						iconPath: '/pagesA/static/details/dizhi.svg'
					}]
				}
			}
		}
	})
	const showLineIndex = ref(1)
	const handleJump = () => {
		// 使用在腾讯位置服务申请的key
		const key = config.navigationKey;
		// 调用插件的app的名称
		const referer = config.referer;
		// 是否启用智能规划
		const enableAI = true;
		// 是否开启导航功能
		const navigation = 1;
		//需要数值型才能调起导航
		const latitude = JSON.parse(props.mapData.latitude)
		const longitude = JSON.parse(props.mapData.longitude)
		// 终点
		const endPoint = JSON.stringify({
			name: props.name,
			latitude: latitude,
			longitude: longitude,
		});
		// console.log('endPoint', endPoint, props.name, props.mapData.latitude, props)
		// 个性化图层
		const layerStyle = 1;
		// 注意：2.0.0需路径填改为route-plan
		wx.navigateTo({
			url: `plugin://route-plan/index?key=${key}&referer=${referer}&endPoint=${endPoint}&enableAI=${enableAI}&navigation=${navigation}&layerStyle=${layerStyle}`,
		});

	}
</script>

<style lang="less" scoped>
	.navigation_box {
		margin-top: 16rpx;
		background: #ffffff;
		padding: 30rpx;

		.change_color {
			color: #EE7930;
			margin-left: 8rpx;
		}

		.map {
			margin-top: 30rpx;
			width: 100%;
			height: 300rpx;
			// border: 1rpx solid red;
		}

		.nav_tap_box {
			display: flex;
			align-items: center;
			margin-top: 24rpx;
			border-bottom: 1rpx solid #f6f6f6;
			padding-bottom: 12rpx;

			.nav_tap {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-family: PingFangSC-Semibold;
				font-size: 28rpx;
				color: #000000;
				letter-spacing: 0;
				line-height: 30rpx;
				font-weight: 600;
				margin-right: 50rpx;

				.tip_line {
					margin-top: 14rpx;
					background-image: linear-gradient(270deg, #F1B13F 0%, #F8D648 100%);
					border-radius: 3rpx;
					width: 80rpx;
					height: 6rpx;
				}

				.select_tip {
					background: #ffffff;
				}
			}
		}

		.address_list {
			margin-top: 30rpx;

			.address_list_title {
				font-family: PingFangSC-Semibold;
				font-size: 26rpx;
				color: #000000;
				letter-spacing: 0;
				// line-height: 30rpx;
				font-weight: 600;
			}

			.address_list_des {
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				color: #666666;
				letter-spacing: 0;
				// line-height: 30rpx;
				font-weight: 400;
			}

			.address_list_nodata {
				font-size: 26rpx;
				color: #666666;
				text-align: center;
			}
		}
	}
</style>